<template>
  <div class="c-w100" :class="orderBy == 4 && modelType == 18 ? 'c-box-shadow8 c-br8 c-pv12 c-ph12 c-bg-white' : ''" :style="orderBy == 4 && modelType == 18 ? getBorderRadius(borderRadius, '0.4rem') : ''">
    <!-- 通用一行一列 && (公开课、小班课版式3和4) -->
    <div v-if="orderBy == 1 || ([3, 4].includes(orderBy) && [18, 42].includes(modelType))">
      <div
        :style="getInnerSpacing(marginSettings, 1, index != itemList.length -1) + (modelType == 42 && orderBy == 4 ? getBorderRadius(borderRadius, '0.4rem') : '')"
        :class="[index != itemList.length -1 ? 'c-mb24' : '' , modelType == 42 && orderBy == 4 && isSetPageBackground ? 'c-pv24 c-ph24 c-bg-white' : '',
                 modelType == 42 && orderBy == 4 && !isSetPageBackground ? 'c-pv12 c-ph12 c-bg-white c-box-shadow8 c-br8' : '']"
        v-for="(item,index) in itemList" :key="index" @click="clickGoDetail(item)">
        <div class="c-flex-row c-text-hidden" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[isSetPageBackground ? 'c-bg-white' : '', [18, 42].includes(modelType) && orderBy == 1 && isSetPageBackground ? 'c-ph12 c-pv12' : '']">
          <div :class="isSetPageBackground ? 'c-mv-auto' : ''">
            <div class="c-text-hidden c-p"
              :style="(!isSetPageBackground || (isSetPageBackground && ([18, 42].includes(modelType) && [1, 4].includes(orderBy))) ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, getRatio(item.prodType))"
              :class="[
                isProdListCom ? 'c-ww240':
                modelType == 48 ? (templateType == 1 ? 'c-ww240' : 'c-ww180') :
                item.prodType == ckFrom.live ? (orderBy == 1 ? 'c-ww160' : orderBy == 4 ? 'c-ww210' : 'c-ww284') :
                item.prodType == ckFrom.privateClass ? (orderBy == 1 ? 'c-ww210' : orderBy == 4 ? 'c-ww240' : 'c-ww284') :
                'c-ww240'
              ]"
            >
              <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
              <div class="c-fs16 c-fc-white c-ph4 c-hh24 c-br4 c-flex-row c-flex-center c-translucent-balck60 c-pa c-p-b10 c-p-r10 c-pz10" v-if="item.prodType == ckFrom.valuableCoupon">{{item.type == 1 ? '兑换券' : item.type == 2 ? '无门槛券' : item.type == 3 ? '满减券' : item.type == 4 ? '抵价券' : item.type == 5 ? '折扣券' : ''}}</div>
              <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz10" v-if="modelType == 5 && [110, 111, 112].includes(item.prodType)">{{courseTypeObj[item.courseType]}}</div>
              <div class="c-pa c-p-b8 c-p-r8 c-pz1 c-translucent-balck60 c-br8 c-hh28 c-ph6 c-textAlign-c c-fs18 c-fc-white c-pz10" v-if="item.prodType == ckFrom.column && item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
              <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28 c-pz10" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'" v-if="item.prodType == ckFrom.edu">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
              <vip-status :item="item" v-if="visible.vipVisible && modelType != 15"></vip-status>
              <div class="timeShow c-pz10" v-if="item.prodType == ckFrom.camp && [1, 4, 5, 6].includes(item.status) && item.isEnroll">
                <!-- 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中 -->
                <div v-if="item.status == 1">距报名<cj-clocker :time="compTimeFn(index,itemList)" format="%D天%H小时"></cj-clocker></div>
                <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
              </div>
            </div>
          </div>
          <div class="c-flex-column c-justify-sb c-ml12 c-flex-grow1 c-w0 c-p" :class="isSetPageBackground && !([18, 42].includes(modelType) && (orderBy == 1 || orderBy == 4)) ? 'c-pv12 c-pr12' : ''">
            <!-- 公用标题 -->
            <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b c-wordBreakAll" :class="getTitleVisible">
              <span class="c-fs18 c-ph8 c-pv2 theme-bg-gradient c-fc-white c-br4 c-p c-mr10 c-fw-n" v-if="visible.prodTypeVisible || [39, 40, 58].includes(modelType)">
                {{getTagProdTypeName(item)}}
                <i class="c-pa prodType-triangle"></i>
              </span>
              <span v-else-if="item.prodType == ckFrom.clockIn && item.payType == 4 && visible.priceVisible">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>
              <span v-else-if="item.promotionType == '1' && item.prodType == ckFrom.distributionColumnPay" class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1 c-ph8 c-inlineblack c-br12">拼团</span>
              {{getName(item)}}
            </div>
            <div>
              <!-- 电子书组件 -->
              <div class="c-fs20 c-fc-gray c-text-ellipsis1" :class="visible.priceVisible || isShowCrossedPrice(item.crossedPrice) ? 'c-mb12' : ''" v-if="item.prodType == ckFrom.ebooks">{{item.author}}</div>
              <!-- 打卡组件 -->
              <div
                class="c-fs18 c-fc-gray"
                :class="visible.priceVisible || isShowCrossedPrice(item.crossedPrice) ? 'c-mb12' : ''"
                v-if="item.prodType == ckFrom.clockIn && visible.dataVisible && enableShowModuleData(item)"
              >
                {{clockMap[item.type]}} | {{showDataTxt(item)}}
              </div>
              <!-- 实体商品组件 -->
              <template v-if="item.prodType == ckFrom.shopping">
                <div class="c-aligni-center c-flex-row c-flexw-wrap" :class="visible.priceVisible || isShowOriginalPrice(item) || visible.dataVisible ? 'c-mv8' : ''" v-if="item.cashBack && item.cashBack.detail">
                  <span class="c-mr12 c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv8" v-if="item.cashBack.isDiscount == 1">{{item.cashBack.detail.title + item.cashBack.detail.amount}}</span>
                  <span class="c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv8" v-if="item.cashBack.isFreeShipping == 1">
                    {{item.cashBack.detail.title}}包邮
                  </span>
                </div>
              </template>
              <!-- 预告 -->
              <div
                v-if="modelType == 15 && visible.forecastVisible"
                class="c-fs18 c-fc-gray"
                :class="visible.priceVisible || isShowCrossedPrice(item.crossedPrice) ? 'c-mb12' : ''"
              >
                开课时间：{{item.liveAt ? item.liveAt.slice(0,-3) : ''}}
              </div>
              <!-- 圈子 -->
              <div
                v-if="item.prodType == ckFrom.circle && visible.dataVisible"
                class="c-fs18 c-fc-gray"
                :class="visible.priceVisible || isShowCrossedPrice(item.crossedPrice) ? 'c-mb12' : ''"
              >
                {{showDataTxt(item)}}
              </div>
              <!-- 小班课组件版式三 -->
              <template v-if="item.prodType == ckFrom.privateClass && orderBy == 3">
                <div class="c-pa c-p-b24 c-p-r24 iconfont c-fs80 c-fc-gray" v-if="getTimeByDate(item.applyEndAt)">&#xe68c;</div>
                <div class="c-fs18 c-fc-gray" :class="visible.priceVisible || isShowCrossedPrice(item.crossedPrice) ? 'c-mb12' : ''" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
              </template>
              <!-- 训练营组件 -->
              <template v-if="item.prodType == ckFrom.camp && isMixProdCom">
                <div class="c-fs18 c-fc-gray c-flex-shrink0 c-mb12" v-if="visible.statusVisible">{{getTime(item)}}</div>
              </template>
              <!-- 活动组件 -->
              <template v-if="item.prodType == ckFrom.activity">
                <div class="c-fs18 c-fc-gray c-flex-shrink0 c-mb12" v-if="item.startAt&&visible.statusVisible">{{getTime(item)}}</div>
              </template>
              <!-- 问答组件 -->
              <template v-if="item.prodType == ckFrom.qa">
                <div class="c-fs18 c-fc-gray c-text-ellipsis2 c-mb12">{{item.describe}}</div>
                <div class="c-fs18 theme-fc c-fw-b" v-if="visible.dataVisible">{{item.questionCount}}个问答</div>
              </template>
              <!-- 小班课组件版式一 -->
              <template v-else-if="item.prodType == ckFrom.privateClass && orderBy == 1">
                <div class="c-pa c-p-b24 c-p-r24 iconfont c-fs80 c-fc-gray" v-if="getTimeByDate(item.applyEndAt)">&#xe68c;</div>
                <div class="c-flex-row c-justify-sb c-aligni-end c-fs0 c-flexw-wrap" v-if="visible.dataVisible || visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                  <div class="c-fs18 c-fc-gray" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
                  <div class="c-flex-column" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                    <div v-if="visible.priceVisible">
                      <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-mt4 c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.crossedPrice}}</div>
                  </div>
                </div>
              </template>
              <!-- 直播组件 -->
              <template v-else-if="item.prodType == ckFrom.live">
                <div v-if="orderBy == 1 && !isMixProdCom" class="c-flex-row c-justify-sb c-aligni-end c-fs0 c-flexw-wrap">
                  <div v-if="visible.statusVisible || visible.priceVisible" class="c-flex-grow1 c-flex-row c-aligni-center">
                    <div v-if="visible.statusVisible" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                    <div v-if="visible.statusVisible || visible.priceVisible" class="c-fs18 c-fc-gray c-ml16 c-mr16">{{getTime(item)}}</div>
                  </div>
                  <template v-if="visible.priceVisible">
                    <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                  </template>
                </div>
                <template v-else>
                  <div v-if="visible.statusVisible || visible.priceVisible" class="c-fs18 c-fc-gray c-mb12">{{getTime(item)}}</div>
                  <div class="c-flex-row c-aligni-center c-justify-sb" v-if="visible.statusVisible || visible.priceVisible">
                    <div v-if="visible.statusVisible && orderBy == 3" class="c-fs18" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                    <template v-if="visible.priceVisible">
                      <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </template>
                    <div v-if="visible.statusVisible && (orderBy == 4 || isMixProdCom)" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                  </div>
                </template>
              </template>
              <!-- 面授课 -->
              <template v-else-if="item.prodType == ckFrom.edu">
                <div class="c-fs18 c-fc-gray" :class="visible.priceVisible || visible.dataVisible ? 'c-mb12' : ''" v-if="visible.dataVisible && visible.priceVisible">{{showDataTxt(item)}}</div>
                <div class="c-flex-row c-justify-end c-aligni-center">
                  <price-com v-if="visible.priceVisible" class="c-flex-grow1" :price="item.price" :prodType="item.prodType"></price-com>
                  <div class="c-fs18 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">{{showDataTxt(item)}}</div>
                  <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-fs24 c-mr14">报名</div>
                </div>
              </template>
              <!-- 有价券 -->
              <template v-else-if="item.prodType == ckFrom.valuableCoupon">
                <div class="c-fs18 c-fc-gray c-mb12 c-text-ellipsis1">{{item | couponApplyText}}</div>
                <div class="c-fs18 c-fc-gray c-mb12">
                  {{item.type == 1 ? '兑换商品' : item.type == 4 ? '抵扣全额' : item.type == 5 ? (Number(item.amount) > 0 ? '满'+Number(item.amount)+'元可用' : '无使用门槛') : (Number(item.amount) > 0 ? '满'+Number(item.amount)+'元可用' : '无使用门槛')}}
                </div>
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <price-com :price="item.productPrice"></price-com>
                  <div class="c-fs20 c-fc-white c-ww110 c-hh40 c-flex-row c-flex-center c-br20 theme-bg">去抢购</div>
                </div>
              </template>
              <!-- 其他组件公用 左边价格 右边商品数据/状态 -->
              <template v-else>
                <div
                  class="c-flex-row c-justify-sb c-aligni-start c-flexw-wrap"
                  v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16 ||
                    (visible.dataVisible && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.clockIn && modelType != 15 && item.prodType != ckFrom.circle && enableShowModuleData(item)) ||
                    (visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive)"
                >
                  <!-- 判断是否显示价格 -->
                  <div class="c-flex-column" v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16">
                    <div v-if="visible.priceVisible">
                      <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice) || isShowOriginalPrice(item)" class="c-mt4 c-fs18 c-fc-gray c-text-decoration-through">
                      {{'￥' | iosPriceFilter}}{{isShowCrossedPrice(item.crossedPrice) ? item.crossedPrice : (isShowOriginalPrice(item) ? originalPrice(item) : '')}}
                    </div>
                  </div>
                  <div class="c-fs18 c-fc-gray c-lh26 c-hh26" v-if="visible.dataVisible && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.clockIn && modelType != 15 && item.prodType != ckFrom.circle && enableShowModuleData(item)">
                    {{showDataTxt(item)}}
                  </div>
                  <div v-if="visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive" class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
                    <div class="c-flex-row c-aligni-end c-mr6">
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                    </div>直播中
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="c-br16 c-bg-sgray c-mt20 c-pv16" v-if="orderBy == 4 && item.list && item.list.length > 0">
          <div class="c-flex-row c-fc-sblack c-fs22 c-ph20" :class="childIndex == item.list.length - 1 ? '' : 'c-pb24'" v-for="(child, childIndex) in item.list" :key="childIndex">
            <span class="theme-fc c-fs26 c-pr20">{{childIndex + 1}}</span>
            <p class="c-text-ellipsis1 ">{{child.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 一行两列 -->
    <div class="c-w100" v-if="orderBy == 2 && modelType != 55">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="w50-8 c-flex-column"
          :class="[isSetMarginBottom(index, itemList, 2) ? 'c-mb24' : '']"
          :style="getInnerSpacingWidth(marginSettings, 1) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(index, itemList, 2))"
          v-for="(item,index) in itemList" :key="index" @click="clickGoDetail(item)">
          <div class="c-bg-white c-w100 c-text-hidden c-flex-column c-flex-1" :class="modelType == 48 ? 'c-box-shadowEdu' : ''" :style="isSetPageBackground || modelType == 48 ? getBorderRadius(borderRadius, '0.4rem') : ''">
            <div class="c-w100 c-text-hidden c-p" :style="(!isSetPageBackground && modelType != 48 ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, getRatio(item.prodType))">
              <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
              <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz10" v-if="modelType == 5 && [110, 111, 112].includes(item.prodType)">{{courseTypeObj[item.courseType]}}</div>
              <div class="c-pa c-p-b8 c-p-r8 c-pz1 c-translucent-balck60 c-br8 c-hh28 c-ph6 c-textAlign-c c-fs18 c-fc-white c-pz10" v-if="item.prodType == ckFrom.column && item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
              <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28 c-pz10" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'" v-if="item.prodType == ckFrom.edu">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
              <div class="timeShow c-pz10" v-if="item.prodType == ckFrom.camp && [1, 4, 5, 6].includes(item.status) && item.isEnroll">
                <!-- 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中 -->
                <div v-if="item.status == 1">距报名<cj-clocker :time="compTimeFn(index,itemList)" format="%D天%H小时"></cj-clocker></div>
                <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
              </div>
              <!-- <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings c-pz10" v-if="visible.dataVisible && item.prodType == ckFrom.ebooks && enableShowModuleData(item)">{{showDataTxt(item)}}</div> -->
            </div>
            <div class="c-flex-column c-justify-sb c-flex-1 c-pv6" :class="[!isSetPageBackground ? 'c-ph10' : 'c-ph16']" v-if="visible.isShowTxtArea">
              <!-- 公用标题 -->
              <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b c-mv6 c-wordBreakAll" :class="getTitleVisible">
                <span class="c-fs18 c-ph8 c-pv2 theme-bg-gradient c-fc-white c-br4 c-p c-mr10 c-fw-n" v-if="visible.prodTypeVisible || [39, 40, 58].includes(modelType)">
                  {{getTagProdTypeName(item)}}
                  <i class="c-pa prodType-triangle"></i>
                </span>
                <span v-else-if="item.prodType == ckFrom.clockIn && item.payType == 4 && visible.priceVisible">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>
                <span v-else-if="item.promotionType == '1' && item.prodType == ckFrom.distributionColumnPay" class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1 c-ph8 c-inlineblack c-br12">拼团</span>
                {{getName(item)}}
              </div>
              <!-- 打卡组件 -->
              <div class="c-fs18 c-fc-gray c-mv6" v-if="item.prodType == ckFrom.clockIn && visible.dataVisible && enableShowModuleData(item)">
                {{clockMap[item.type]}} | {{showDataTxt(item)}}
              </div>
              <!-- 圈子组件 -->
              <div class="c-fs18 c-fc-gray c-mv6" v-if="item.prodType == ckFrom.circle && visible.dataVisible && enableShowModuleData(item)">
                {{showDataTxt(item)}}
              </div>
              <!-- 实体商品组件 -->
              <template v-if="item.prodType == ckFrom.shopping">
                <div class="c-aligni-center c-flex-row c-flexw-wrap" v-if="item.cashBack && item.cashBack.detail">
                  <span class="c-mr12 c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv6" v-if="item.cashBack.isDiscount == 1">{{item.cashBack.detail.title + item.cashBack.detail.amount}}</span>
                  <span class="c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv6" v-if="item.cashBack.isFreeShipping == 1">
                    {{item.cashBack.detail.title}}包邮
                  </span>
                </div>
              </template>
              <!-- 小班课组件 -->
              <template v-if="item.prodType == ckFrom.privateClass">
                <div class="c-fs18 c-fc-gray c-mv6" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
              </template>
              <!-- 训练营组件 -->
              <template v-if="item.prodType == ckFrom.camp && isMixProdCom">
                <div class="c-fs18 c-fc-gray c-mv6" v-if="visible.statusVisible">{{getTime(item)}}</div>
              </template>
              <!-- 直播数据 非纯直播组件 -->
              <template v-if="item.prodType == ckFrom.live && modelType != 18">
                <div class="c-fs18 c-fc-gray c-mv6" v-if="visible.statusVisible">{{getTime(item)}}</div>
              </template>
              <!-- 活动组件 -->
              <template v-if="item.prodType == ckFrom.activity">
                <div class="c-fs18 c-fc-gray c-mv6" v-if="item.startAt&&visible.statusVisible">{{getTime(item)}}</div>
                <!-- <div class="c-fs18 c-fc-gray c-mv6 c-flex-shrink0" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{showDataTxt(item)}}</div> -->
              </template>
              <!-- 面授课 -->
              <template v-if="item.prodType == ckFrom.edu">
                <div class="c-mv6 c-fs18 c-fc-gray" v-if="visible.dataVisible && visible.priceVisible">{{showDataTxt(item)}}</div>
                <div class="c-flex-row c-justify-end c-aligni-center c-mv6">
                  <price-com v-if="visible.priceVisibl" class="c-flex-grow1" :price="item.price" :prodType="item.prodType"></price-com>
                  <div class="c-fs18 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">{{showDataTxt(item)}}</div>
                  <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-fs24">报名</div>
                </div>
              </template>
              <!-- 直播组件 只有直播数据 -->
              <template v-else-if="item.prodType == ckFrom.live && modelType == 18">
                <div v-if="visible.statusVisible" class="c-fs18 c-fc-gray c-mv6">{{getTime(item)}}</div>
                <div class="c-flex-row c-justify-sb c-flexw-wrap c-mv6 c-aligni-start" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                  <div v-if="item.prodType == ckFrom.live && visible.statusVisible" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                  <div class="c-flex-column" :class="getPriceHeight(itemList, index, 2)" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                    <div v-if="visible.priceVisible" class="c-mr10">
                      <price-com :modelType="modelType" :templateType="templateType" :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-text-decoration-through c-mt4 c-fs18 c-fc-gray">{{'￥' | iosPriceFilter}}{{item.crossedPrice}}</div>
                  </div>
                </div>
              </template>
              <!-- 其他组件公用 -->
              <template v-else>
                <div
                  class="c-flex-row c-justify-sb c-flexw-wrap c-mv6 c-aligni-start"
                  v-if="((visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16) ||
                    (visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.circle && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.live) ||
                    (visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive) ||
                    (item.prodType == ckFrom.live && modelType != 18 && visible.statusVisible)"
                >
                  <div
                    class="c-flex-column"
                    :class="getPriceHeight(itemList, index, 2)"
                    v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16"
                  >
                    <div v-if="visible.priceVisible" class="c-mr10">
                      <price-com :modelType="modelType" :templateType="templateType" :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice) || isShowOriginalPrice(item)" class="c-text-decoration-through c-mt4 c-fs18 c-fc-gray">
                      {{'￥' | iosPriceFilter}}{{isShowCrossedPrice(item.crossedPrice) ? item.crossedPrice : (isShowOriginalPrice(item) ? originalPrice(item) : '')}}
                    </div>
                  </div>
                  <div class="c-fs18 c-fc-gray c-lh26 c-hh26" v-if="visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.circle && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.live">
                    <template v-if="enableShowModuleData(item)">{{showDataTxt(item)}}</template>
                  </div>
                  <div v-if="item.prodType == ckFrom.live && modelType != 18 && visible.statusVisible" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                  <div v-if="visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive" class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
                    <div class="c-flex-row c-aligni-end c-mr6">
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                    </div>直播中
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 一行三列 电子书 -->
    <div class="c-w100" v-if="orderBy == 3 && modelType != 18 && modelType != 42">
      <div class="c-flex-row c-flexw-wrap">
        <div class="c-flex-column"
          :style="getInnerSpacingWidth(marginSettings, 3, index) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(index, itemList, 3))"
          :class="[(index + 1) % 3 == 0 ? '' : 'c-mr24', isSetPageBackground ? 'w33-24-3' : 'w33-24-3', isSetMarginBottom(index, itemList, 3) ? 'c-mb24' : '']"
          v-for="(item,index) in itemList" :key="index" @click="clickGoDetail(item)">
          <div class="c-bg-white c-w100 c-text-hidden c-flex-column c-flex-1" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : ''">
            <div class="c-text-hidden c-p" :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, getRatio(item.prodType))">
              <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
              <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings c-pz10" v-if="visible.dataVisible && item.prodType == ckFrom.ebooks && enableShowModuleData(item)">{{showDataTxt(item)}}</div>
            </div>
            <div class="c-flex-column c-justify-sb c-flex-1 c-pv6" :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'" v-if="visible.isShowTxtArea">
              <!-- 公用标题 -->
              <div class="c-fs24 c-lh32 c-fc-xblack c-mt16 c-fw-b c-ws-bs c-mv6 c-wordBreakAll" :class="getTitleVisible">{{getName(item)}}</div>
              <!-- 电子书组件 -->
              <div class="c-fs18 c-fc-sblack c-text-ellipsis1 c-lh32 c-mv6" v-if="item.prodType == ckFrom.ebooks">{{item.author}}</div>
              <!-- 其他组件公用 -->
              <div class="c-mv6" :class="getPriceHeight(itemList, index, 3)" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                <template v-if="visible.priceVisible">
                  <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                </template>
                <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-lh c-fs18 c-fc-gray c-text-decoration-through c-mt4">{{'￥' | iosPriceFilter}}{{ item.crossedPrice }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通用大图 || (公开课、小班课版式5) -->
    <div class="c-w100" v-if="(orderBy == 4 && ![18, 42].includes(modelType)) || (orderBy == 5 && [18, 42].includes(modelType))">
      <div :class="index != itemList.length -1 ? 'c-mb24' : ''"
        :style="getInnerSpacing(marginSettings, 1, index != itemList.length - 1)"
        v-for="(item,index) in itemList" :key="index" @click="clickGoDetail(item)">
        <div class="c-bg-white" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[18, 42].includes(modelType) ? 'c-box-shadow8 c-br8 c-pt18 c-pb24 c-ph18' : 'c-text-hidden'">
          <div class="c-w100 c-text-hidden c-p" :style="(!isSetPageBackground || (orderBy == 5 && [18, 42].includes(modelType)) ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, getRatio(item.prodType))">
            <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
            <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz10" v-if="modelType == 5 && [110, 111, 112].includes(item.prodType)">{{courseTypeObj[item.courseType]}}</div>
            <div class="c-pa c-p-b8 c-p-r8 c-pz1 c-translucent-balck60 c-br8 c-hh28 c-ph6 c-textAlign-c c-fs18 c-fc-white c-pz10" v-if="item.prodType == ckFrom.column && item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
            <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28 c-pz10" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'" v-if="item.prodType == ckFrom.edu">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
            <vip-status :item="item" v-if="visible.vipVisible && modelType != 15"></vip-status>
            <div class="timeShow c-pz10" v-if="item.prodType == ckFrom.camp && [1, 4, 5, 6].includes(item.status) && item.isEnroll">
              <!-- 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中 -->
              <div v-if="item.status == 1">距报名<cj-clocker :time="compTimeFn(index,itemList)" format="%D天%H小时"></cj-clocker></div>
              <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
            </div>
            <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings c-pz10" v-if="visible.dataVisible && item.prodType == ckFrom.ebooks && enableShowModuleData(item) && modelType == 47">{{showDataTxt(item)}}</div>
          </div>
          <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'" class="c-mt20" v-if="visible.isShowTxtArea">
            <!-- 公用标题 -->
            <div class="c-fs28 c-lh32 c-fc-xblack c-fw-b c-wordBreakAll" :class="getTitleVisible">
              <span class="c-fs18 c-ph8 c-pv2 theme-bg-gradient c-fc-white c-br4 c-p c-mr10 c-fw-n" v-if="visible.prodTypeVisible || [39, 40, 58].includes(modelType)">
                {{getTagProdTypeName(item)}}
                <i class="c-pa prodType-triangle"></i>
              </span>
              <span v-else-if="item.prodType == ckFrom.clockIn && item.payType == 4 && visible.priceVisible">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>
              <span v-else-if="item.promotionType == '1' && item.prodType == ckFrom.distributionColumnPay" class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1 c-ph8 c-inlineblack c-br12">拼团</span>
              {{getName(item)}}
            </div>
            <!-- 实体商品组件 -->
            <template v-if="item.prodType == ckFrom.shopping">
              <div class="c-aligni-center c-flex-row c-flexw-wrap" v-if="item.cashBack && item.cashBack.detail">
                <span class="c-mr12 c-fs22 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv16" v-if="item.cashBack.isDiscount == 1">{{item.cashBack.detail.title + item.cashBack.detail.amount}}</span>
                <span class="c-fs22 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv16" v-if="item.cashBack.isFreeShipping == 1">
                  {{item.cashBack.detail.title}}包邮
                </span>
              </div>
            </template>
            <!-- 电子书组件 -->
            <template v-if="item.prodType == ckFrom.ebooks">
              <div class="c-fs22 c-fc-sblack c-text-ellipsis1 c-mv16" v-if="item.prodType == ckFrom.ebooks">{{item.author}}</div>
            </template>
            <!-- 小班课组件 -->
            <template v-if="item.prodType == ckFrom.privateClass">
              <div class="c-pa c-p-b2 c-p-r-8 iconfont c-fs80 c-fc-gray c-mv16" v-if="getTimeByDate(item.applyEndAt)">&#xe68c;</div>
            </template>
            <!-- 公开课组件 -->
            <template v-if="item.prodType == ckFrom.live">
              <div v-if="visible.statusVisible" class="c-fs22 c-fc-gray c-flex-grow1 c-mv16">{{getTime(item)}}</div>
            </template>
            <!-- 预告 -->
            <div v-if="modelType == 15" class="c-flex-row c-justify-sb c-aligni-end c-mv16">
              <div v-if="modelType == 15 && visible.forecastVisible" class="c-fs22 c-fc-gray">开课时间：{{item.liveAt ? item.liveAt.slice(0,-3) : ''}}</div>
            </div>
            <!-- 训练营组件 -->
            <template v-if="item.prodType == ckFrom.camp && isMixProdCom">
              <div class="c-fs22 c-fc-gray c-flex-grow1 c-mv16" v-if="visible.statusVisible">{{getTime(item)}}</div>
            </template>
            <!-- 活动组件 -->
            <div class="c-flex-row c-justify-sb c-aligni-center c-mv16" v-if="item.prodType == ckFrom.activity">
              <!-- <span class="c-fs22 c-fc-gray c-lh c-flex-shrink0" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{showDataTxt(item)}}</span> -->
              <div class="c-fs22 c-fc-gray c-flex-shrink0" v-if="item.startAt&&visible.statusVisible">{{getTime(item)}}</div>
            </div>
            <!-- 问答组件 -->
            <template v-if="item.prodType == ckFrom.qa">
              <div class="c-fs22 c-fc-gray c-text-ellipsis2 c-mv16">{{item.describe}}</div>
              <div class="c-fs22 theme-fc c-fw-b c-mv16" v-if="visible.dataVisible">{{item.questionCount}}个问答</div>
            </template>
            <!-- 面授课 -->
            <template v-else-if="item.prodType == ckFrom.edu">
              <div class="c-flex-row c-justify-sb c-aligni-center c-mv16">
                <div class="c-flex-row c-aligni-center">
                  <div v-if="visible.priceVisible">
                    <price-com :price="item.price" :txtClass="'c-fs28'" :numberClass="'c-fs30'" :prodType="item.prodType"></price-com>
                  </div>
                  <span v-if="visible.priceVisible && visible.dataVisible" class="c-ph8 c-fs22 c-fc-gray">|</span>
                  <div class="c-fs22 c-fc-gray c-fw-n" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
                </div>
                <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-ml20 c-fs24">报名</div>
              </div>
            </template>
            <!-- 其他组件公用 -->
            <template v-else>
              <div
                class="c-flex-row c-justify-sb c-aligni-center c-flexw-wrap c-mv16"
                v-if="((visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16) ||
                  (visible.dataVisible && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.live && modelType != 15 && enableShowModuleData(item)) ||
                  (visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive) ||
                  (item.prodType == ckFrom.live && visible.statusVisible) ||
                  (modelType == 47 && item.author)"
              >
                <div class="c-flex-row c-aligni-center c-flexw-wrap" v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16">
                  <div v-if="visible.priceVisible" class="c-mr10">
                    <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                  </div>
                  <div v-if="isShowCrossedPrice(item.crossedPrice) || isShowOriginalPrice(item)" class="c-fs22 c-fc-gray c-text-decoration-through">
                    {{'￥' | iosPriceFilter}}{{isShowCrossedPrice(item.crossedPrice) ? item.crossedPrice : (isShowOriginalPrice(item) ? originalPrice(item) : '')}}
                  </div>
                </div>
                <div class="c-fs22 c-lh26 c-hh26 c-fc-gray" v-if="visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.live && modelType != 15 && modelType != 47 && enableShowModuleData(item)">
                  {{showDataTxt(item)}}
                </div>
                <div v-if="visible.dataVisible && enableShowModuleData(item) && item.prodType == ckFrom.clockIn" class="c-fs22 c-lh26 c-hh26 c-fc-gray">{{clockMap[item.type]}} | {{showDataTxt(item)}}</div>
                <div v-if="visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive" class="c-fs22 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
                  <div class="c-flex-row c-aligni-end c-mr6">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>直播中
                </div>
                <template v-if="item.prodType == ckFrom.live && visible.statusVisible">
                  <div class="c-flex-row c-justify-sb c-aligni-center c-fs0">
                    <div class="c-fs22 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                  </div>
                </template>
                <!-- 电子书组件 -->
                <div class="c-fs18 c-fc-sblack c-text-ellipsis1 c-lh32 c-mv6" v-if="modelType == 47 && item.author">{{item.author}}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!-- 通用一行多列 || (公开课、小班课版式6) -->
    <div class="c-w100" v-if="(orderBy == 5 && ![18, 42].includes(modelType)) || (orderBy == 6 && [18, 42].includes(modelType)) || (orderBy == 2 && modelType == 55)">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n">
        <div class="c-inlineflex-row">
          <div class="c-flex-column c-mr20 c-text-hidden c-bg-white"
            :class="modelType == 47 ? 'c-ww160' : 'c-bd1 c-ww260'"
            :style="getInnerSpacing(marginSettings, 2) + getBorderRadius(borderRadius, '0.4rem')"
            v-for="(item,index) in itemList" :key="index" @click="clickGoDetail(item)">
            <div class="c-w100 c-p c-text-hidden" :style="getImageRatio(imageSetting, getRatio(item.prodType))">
              <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
              <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz10" v-if="modelType == 5 && [110, 111, 112].includes(item.prodType)">{{courseTypeObj[item.courseType]}}</div>
              <div class="c-pa c-p-b8 c-p-r8 c-pz1 c-translucent-balck60 c-br8 c-hh28 c-ph6 c-textAlign-c c-fs18 c-fc-white c-pz10" v-if="item.prodType == ckFrom.column && item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
              <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28 c-pz10" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'" v-if="item.prodType == ckFrom.edu">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
              <div class="timeShow c-pz10" v-if="item.prodType == ckFrom.camp && [1, 4, 5, 6].includes(item.status) && item.isEnroll">
                <!-- 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中 -->
                <div v-if="item.status == 1">距报名<cj-clocker :time="compTimeFn(index,itemList)" format="%D天%H小时"></cj-clocker></div>
                <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
              </div>
              <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings c-pz10" v-if="visible.dataVisible && item.prodType == ckFrom.ebooks && enableShowModuleData(item) && modelType == 47">{{showDataTxt(item)}}</div>
            </div>
            <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'" v-if="visible.isShowTxtArea">
              <!-- 公用标题 -->
              <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b c-mv12 c-wordBreakAll" :class="getTitleVisible">
                <span class="c-fs18 c-ph8 c-pv2 theme-bg-gradient c-fc-white c-br4 c-p c-mr10 c-fw-n" v-if="visible.prodTypeVisible || [39, 40, 58].includes(modelType)">
                  {{getTagProdTypeName(item)}}
                  <i class="c-pa prodType-triangle"></i>
                </span>
                <span v-else-if="item.prodType == ckFrom.clockIn && item.payType == 4 && visible.priceVisible">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>
                <span v-else-if="item.promotionType == '1' && item.prodType == ckFrom.distributionColumnPay" class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1 c-ph8 c-inlineblack c-br12">拼团</span>
                {{getName(item)}}
              </div>
              <!-- 实体商品组件 -->
              <template v-if="item.prodType == ckFrom.shopping">
                <div class="c-aligni-center c-flex-row c-flexw-wrap" v-if="item.cashBack && item.cashBack.detail">
                  <span class="c-mr12 c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv12" v-if="item.cashBack.isDiscount == 1">{{item.cashBack.detail.title + item.cashBack.detail.amount}}</span>
                  <span class="c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mv12" v-if="item.cashBack.isFreeShipping == 1">
                    {{item.cashBack.detail.title}}包邮
                  </span>
                </div>
              </template>
              <!-- 打卡组件 -->
              <template v-if="item.prodType == ckFrom.clockIn">
                <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.dataVisible && enableShowModuleData(item)">
                  {{clockMap[item.type]}} | {{showDataTxt(item)}}
                </div>
              </template>
              <!-- 电子书组件 -->
              <template v-if="item.prodType == ckFrom.ebooks">
                <div class="c-fs18 c-fc-gray c-text-ellipsis1 c-mv12" v-if="item.prodType == ckFrom.ebooks">{{item.author}}</div>
              </template>
              <!-- 圈子 -->
              <template v-if="item.prodType == ckFrom.circle">
                <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
              </template>
              <!-- 小班课组件 -->
              <template v-if="item.prodType == ckFrom.privateClass">
                <div class="c-pa c-p-b2 c-p-r-8 iconfont c-fs80 c-fc-gray" v-if="getTimeByDate(item.applyEndAt)">&#xe68c;</div>
                <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
              </template>
              <!-- 训练营组件 -->
              <template v-if="item.prodType == ckFrom.camp && isMixProdCom">
                <div class="c-fs18 c-fc-gray c-mv16" v-if="visible.statusVisible">{{getTime(item)}}</div>
              </template>
              <!-- 活动组件 -->
              <div class="c-flex-row c-justify-sb c-aligni-center c-mv12" v-if="item.prodType == ckFrom.activity">
                <!-- <span class="c-fs18 c-fc-gray c-lh c-flex-shrink0" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{item.enrollCount}}人已报名</span> -->
                <div class="c-fs18 c-fc-gray c-flex-shrink0" v-if="item.startAt&&visible.statusVisible">{{getTime(item)}}</div>
              </div>
              <!-- 问答组件 -->
              <template v-if="item.prodType == ckFrom.qa">
                <div class="c-fs18 c-fc-gray c-text-ellipsis2 c-mv12">{{item.describe}}</div>
                <div class="c-fs18 theme-fc c-mv12 c-fw-b" v-if="visible.dataVisible">{{item.questionCount}}个问答</div>
              </template>
              <!-- 面授课 -->
              <template v-else-if="item.prodType == ckFrom.edu">
                <div class="c-mt10 c-fs18 c-fc-gray" v-if="visible.dataVisible && visible.priceVisible">{{showDataTxt(item)}}</div>
                <div class="c-flex-row c-justify-end c-aligni-center c-mv12">
                  <price-com v-if="visible.priceVisibl" class="c-flex-grow1" :price="item.price" :prodType="item.prodType"></price-com>
                  <div class="c-fs18 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">{{showDataTxt(item)}}</div>
                  <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-fs24">报名</div>
                </div>
              </template>
              <!-- 直播组件 -->
              <template v-else-if="item.prodType == ckFrom.live">
                <div v-if="visible.statusVisible" class="c-fs18 c-fc-gray c-flex-grow1 c-mv12">{{getTime(item)}}</div>
                <div class="c-flex-row c-justify-sb c-flexw-wrap c-mv6 c-aligni-start" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                  <div v-if="item.prodType == ckFrom.live && visible.statusVisible" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                  <div class="c-flex-column" :class="getPriceHeight(itemList, index, 2)" v-if="visible.priceVisible || isShowCrossedPrice(item.crossedPrice)">
                    <div v-if="visible.priceVisible" class="c-mr10">
                      <price-com :modelType="modelType" :templateType="templateType" :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-text-decoration-through c-mt4 c-fs18 c-fc-gray">{{'￥' | iosPriceFilter}}{{item.crossedPrice}}</div>
                  </div>
                </div>
              </template>
              <!-- 其他组件公用 -->
              <template v-else>
                <div
                  class="c-flex-row c-justify-sb c-flexw-wrap c-mv12"
                  v-if="((visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16) ||
                    (visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.personalLiven && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.circle && modelType != 47 && enableShowModuleData(item)) ||
                    (visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive)"
                >
                  <div class="c-flex-column" v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16">
                    <div v-if="visible.priceVisible">
                      <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                    </div>
                    <div v-if="isShowCrossedPrice(item.crossedPrice) || isShowOriginalPrice(item)" class="c-lh c-fs18 c-fc-gray c-text-decoration-through c-mt4">
                      {{'￥' | iosPriceFilter}}{{isShowCrossedPrice(item.crossedPrice) ? item.crossedPrice : (isShowOriginalPrice(item) ? originalPrice(item) : '')}}
                    </div>
                  </div>
                  <div class="c-fs18 c-fc-gray c-lh26 c-hh26" v-if="visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.circle && modelType != 47 && enableShowModuleData(item)">
                    {{showDataTxt(item)}}
                  </div>
                  <div v-if="visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive" class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
                    <div class="c-flex-row c-aligni-end c-mr6">
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                    </div>直播中
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通用瀑布流 || (公开课、小班课版式7) -->
    <div class="c-w100" v-if="(orderBy == 8 && ![18, 42].includes(modelType)) || (orderBy == 7 && [18, 42].includes(modelType))">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <water-fall v-model="itemList" ref="waterFallList">
          <template v-slot:list="{list}">
            <div class="c-flex-column w100-12"
              :class="index != list.length -1 ? 'c-mb24' : ''"
              :style="getInnerSpacingWidth(marginSettings, 2) + getInnerSpacing(marginSettings, 1, index != list.length - 1)"
              v-for="(item,index) in list" :key="index" @click="clickGoDetail(item)">
              <div class="c-bg-white c-w100 c-text-hidden" :style="getBorderRadius(borderRadius, '0.4rem')">
                <div class="c-w100 c-maxh284 c-text-hidden c-p" :style="!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : ''">
                  <img class="c-w100 c-block imgCloseBig" :src="$addXossFilter(showCover(item), require('../../assets/defult270.png'))"/>
                  <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8" v-if="modelType == 5 && [110, 111, 112].includes(item.prodType)">{{courseTypeObj[item.courseType]}}</div>
                  <div class="c-pa c-p-b8 c-p-r8 c-pz1 c-translucent-balck60 c-br8 c-hh28 c-ph6 c-textAlign-c c-fs18 c-fc-white" v-if="item.prodType == ckFrom.column && item.isUpdating == 1 && enableColumnRelates == 1">更新中</div>
                  <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
                  <div class="timeShow" v-if="item.prodType == ckFrom.camp && [1, 4, 5, 6].includes(item.status) && item.isEnroll">
                    <!-- 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中 -->
                    <div v-if="item.status == 1">距报名<cj-clocker :time="compTimeFn(index,list)" format="%D天%H小时"></cj-clocker></div>
                    <div v-if="[4, 5, 6].includes(item.status) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
                  </div>
                </div>
                <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'">
                  <!-- 公用标题 -->
                  <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b ws-nor c-mv12 c-wordBreakAll c-text-ellipsis2">
                    <span class="c-fs18 c-ph8 c-pv2 theme-bg-gradient c-fc-white c-br4 c-p c-mr10 c-fw-n" v-if="visible.prodTypeVisible || [39, 40, 58].includes(modelType)">
                      {{getTagProdTypeName(item)}}
                      <i class="c-pa prodType-triangle"></i>
                    </span>
                    {{getName(item)}}
                  </div>
                  <!-- 小班课组件 -->
                  <template v-if="item.prodType == ckFrom.privateClass">
                    <div class="c-pa c-p-b2 c-p-r-8 iconfont c-fs80 c-fc-gray" v-if="getTimeByDate(item.applyEndAt)">&#xe68c;</div>
                    <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.dataVisible">{{showDataTxt(item)}}</div>
                  </template>
                  <!-- 直播组件 -->
                  <template v-if="item.prodType == ckFrom.live">
                    <div v-if="visible.statusVisible" class="c-fs20 c-fc-gray c-flex-grow1 c-mv12">{{getTime(item)}}</div>
                  </template>
                  <!-- 训练营组件 -->
                  <template v-if="item.prodType == ckFrom.camp && isMixProdCom">
                    <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.statusVisible">{{getTime(item)}}</div>
                  </template>
                  <!-- 活动组件 -->
                  <template v-if="item.prodType == ckFrom.activity">
                    <div class="c-fs18 c-fc-gray c-mv12" v-if="item.startAt&&visible.statusVisible">{{getTime(item)}}</div>
                    <!-- <div class="c-fs18 c-fc-gray c-mv12 c-flex-shrink0" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{showDataTxt(item)}}</div> -->
                  </template>
                  <!-- 打卡组件 -->
                  <template v-if="item.prodType == ckFrom.clockIn">
                    <div class="c-fs18 c-fc-gray c-mv12" v-if="visible.dataVisible && enableShowModuleData(item)">
                      {{clockMap[item.type]}} | {{showDataTxt(item)}}
                    </div>
                  </template>
                  <!-- 其他组件公用 -->
                  <template>
                    <div
                      class="c-flex-row c-justify-sb c-flexw-wrap c-mv12"
                      v-if="((visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16) ||
                        (visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.live && enableShowModuleData(item)) ||
                        (visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive) ||
                        (visible.statusVisible && item.prodType == ckFrom.live)"
                    >
                      <div class="c-flex-column" v-if="(visible.priceVisible || isShowOriginalPrice(item) || isShowCrossedPrice(item.crossedPrice)) && modelType != 16">
                        <div v-if="visible.priceVisible">
                          <price-com :price="getProdPrice(item)" :payType="item.payType" :optimal="item.optimal" :prodType="item.prodType"></price-com>
                        </div>
                        <div v-if="isShowCrossedPrice(item.crossedPrice) || isShowOriginalPrice(item)" class="c-text-decoration-through c-mt4 c-fs18 c-fc-gray">
                          {{'￥' | iosPriceFilter}}{{isShowCrossedPrice(item.crossedPrice) ? item.crossedPrice : (isShowOriginalPrice(item) ? originalPrice(item) : '')}}
                        </div>
                      </div>
                      <div class="c-fs18 c-fc-gray c-lh26 c-hh26" v-if="visible.dataVisible && item.prodType != ckFrom.clockIn && item.prodType != ckFrom.personalLive && item.prodType != ckFrom.privateClass && item.prodType != ckFrom.live && enableShowModuleData(item)">
                        {{showDataTxt(item)}}
                      </div>
                      <div v-if="visible.statusVisible && item.prodType == ckFrom.live" class="c-fs18 c-lh26 c-hh26" :class="item.status == 1 ? 'status-color':item.status == 0 ? 'c-fc-xlred':'c-fc-sblack'">{{statusMap[item.status]}}</div>
                      <div v-if="visible.statusVisible && item.liveStatus == 1 && ckFrom.personalLive" class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center status-1">
                        <div class="c-flex-row c-aligni-end c-mr6">
                          <span class="pillar"></span>
                          <span class="pillar"></span>
                          <span class="pillar"></span>
                        </div>直播中
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </water-fall>
      </div>
    </div>
    <!-- 展示更多的按钮是否选中 && 一行一列的圈子 && 一行一列/一行两列的 -->
    <div v-if="showMore && ((orderBy == 1 && modelType == 55) || (![3, 4, 5].includes(orderBy) && ![18, 42, 55].includes(modelType)) || (orderBy != 6 && [18, 42].includes(modelType)))"
      class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
      <div class="c-ph12 c-pv6 theme-fc theme-bg-10 c-br20" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { customStyle } from '@/utils/customStyle.js'
import vipStatus from '@/components/templates/common/vipStatus.vue'
import waterFall from "@/components/templates/common/waterfall.vue"
import CustomImg from '@/components/templates/customImg.vue'
import PriceCom from '@/components/templates/common/priceCom.vue'
export default {
  name: "CommonProdItem",
  mixins: [appRouterChange, customStyle],
  components: {
    vipStatus,
    waterFall,
    CustomImg,
    PriceCom
  },
  props: {
    modelType: {
      type: Number,
      default: 0
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    orderBy: {
      type: Number,
      default: 1//1一行一列，2一行两列，3一行三列, 4大图，5一行多列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格(营销活动的划线价格，划线的是产品没参加营销活动时的购买价)
          crossedPriceVisible:true, // 划线价格（产品的划线价格，只作展示，不作为售卖价）
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    imageSetting: {
      type: Object,
      default: null
    },
    borderRadius: {
      type: Object,
      default: null
    },
    templateType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      itemList: [],
      courseType: -1,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      courseTypeObj: global.prodCourseType,
      ckFrom: global.ckFrom,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
      cfg: JSON.parse(localStorage.getItem("cfg")),
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "回放已过期"
      },
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
      clockMap: {
        1: '日历打卡',
        2: '作业打卡',
        3: '闯关打卡'
      },
      prodMapType: { // 文案的独立性 暂不引用global数据
        1: 'VIP',
        5: '课程',
        7: '活动',
        8: '资料',
        9: '专栏',
        10: '社群',
        11: '测评专题',
        12: '实体商城',
        13: '独立商城',
        15: '问答',
        23: 'SVIP',
        41: '打卡',
        42: '服务商',
        43: '服务商',
        44: '服务商',
        138: '服务商',
        139: '服务商',
        160: '服务商',
        161: '服务商',
        162: '服务商',
        163: '服务商',
        61: '知识套餐',
        51: '公开课',
        53: '约课',
        56: '词典',
        66: '限时购课程',
        67: '限时购专栏',
        68: '限时购VIP',
        69: '限时购svip',
        70: '限时购知识套餐',
        71: '限时购测评',
        72: '限时购直播',
        75: '互动测评',
        76: '表单',
        77: 'AI.测评',
        78: '训练营',
        142: '电子书',
        86: '预约',
        92: '优惠券',
        103: '内容市场',
        115: '小班课',
        116: '面授课',
        118: '机构课',
        121: '拼团',
        122: '限时折扣',
        111: '音频',
        112: '图文',
        110: '视频',
        125: '考试',
        126: '兑换券',
        129: '练习',
        156: '音频',
        180: '直播间',
        181: '圈子',
        200: '代金券'
      },
    };
  },
  computed: {
    // 判断是不是商品列表组件
    isProdListCom() {
      // 商品列表(39单列 40双列 58大图/一行多列) 专区
      return [39, 40, 58, 59].includes(this.modelType);
    },
    // 判断是否是标签导航或者商品列表
    isMixProdCom() {
      return this.modelType == 48 || this.isProdListCom;
    },
    // 获取标签对应类名
    getTagProdTypeName() {
      return function (item) {
        // vip / svip专区数据字段区分[501, 523].includes(item.cProdType)
        if (item.prodType != this.ckFrom.course && this.prodMapType[item.prodType]) {
          return this.prodMapType[item.prodType];
        } else {
          return this.courseTypeObj[([501, 523].includes(item.cProdType) && item.prodType ? item.childType : item.courseType)] || '未知'
        }
      }
    },
    // 判断模块是否开启显示模块数据
    enableShowModuleData() {
    return function(item) {
      let prodType = [110, 111, 112].includes(item.prodType) ? this.ckFrom.course : item.prodType;
      return this.enableShowModuleView == 1 || !(this.enableHiddenModules && this.enableHiddenModules.includes(prodType))
    }
    },
    // 获取产品价格
    getProdPrice() {
      return function(item) {
        return item.prodType == this.ckFrom.shopping ? item.goodsPrice : (item.price ? item.price : item.prodPrice);
      }
    },
    // 获取商品划线价
    originalPrice() {
      return function(item) {
        if (item.prodType == this.ckFrom.distributionColumnPay) {
          return item.markPrice;
        } else if (item.prodType == this.ckFrom.shopping) {
          return item.originalPrice;
        }
      }
    },
    // type 1:一行一列 2:一行两列 3:一行三列 4:大图
    getPriceHeight() {
      return function(itemList, index, type) {
        if (itemList.length == 0) return ''
        let length = itemList.length;
        let subIndex = parseInt(index / type);
        let list = itemList.filter((item, ind) => {return (ind >= (subIndex * type)) && (ind < ((subIndex + 1) * type > length ? length : (subIndex + 1) * type))});
        let hasCrossPrice = type == 3 ? list.filter(item => this.isShowCrossedPrice(item.crossedPrice)).length > 0 : list.filter(item => (this.isShowCrossedPrice(item.crossedPrice) || this.isShowOriginalPrice(item))).length > 0
        return hasCrossPrice ? (type == 3 ? 'c-hh40' : 'c-hh48') : 'c-hh24';
      }
    },
    getTitleVisible() {
      if (this.visible && String(this.visible.titleVisible)) {
        return this.visible.titleVisible == 0 && !this.visible.prodTypeVisible ? 'hide' : this.visible.titleVisible == 1 ? 'c-text-ellipsis1' : this.visible.titleVisible == 2 ? 'c-text-ellipsis2' : '';
      }
      return 'c-text-ellipsis2'
    },
    // 获取组件默认比例
    getRatio() {
      return function (prodType) {
        if (!prodType) return '3 / 2';
        return prodType == this.ckFrom.ebooks ? '2 / 3' : (prodType == this.ckFrom.circle || prodType == this.ckFrom.shopping) ? '1' : '3 / 2';
      }
    },
    // 判断是否设置一行两列的底部间距
    // index 索引值 num 2两列 3三列
    isSetMarginBottom() {
      return function (index, list, num) {
       return (index < (list.length % num != 0 ? (list.length - list.length % num) : (list.length - num))) && list.length > num
      }
    },
    getName() {
      return function (data) {
        let name = '';
        switch (parseFloat(data.prodType)) {
          case this.ckFrom.reservation:
            name = data.themeName;
            break
          case this.ckFrom.qa:
            name = data.title;
            break
          case this.ckFrom.valuableCoupon:
            name = data.productName;
            break
          case this.ckFrom.edu:
            name = data.saleCourseName;
            break
          default:
            name = data.name;
            break;
        }
        return this.visible.titleVisible == 0 && this.orderBy != 8 ? '' : (name ? name : data.name)
      }
    },
    // 商品数据展示文案
    showDataTxt() {
      return function (data) {
        let str = '';
        switch (parseFloat(data.prodType)) {
          case 110: case 111: case 112: case this.ckFrom.course:
            str = utilJs.formatTenThousand(data.plays) + (data.courseType == 1 ? `次收听` : '次观看');
            break;
          case this.ckFrom.column:
            str = (data.payType == 2 ? utilJs.formatTenThousand(data.sales) : utilJs.formatTenThousand(data.clicks)) + (localStorage.getItem('isWxAppIos') == 1 ? '次观看' : data.payType == 2 ? '人购买' : '次观看');
            break;
          case this.ckFrom.package:
            str = (data.payType == 2 ? utilJs.formatTenThousand(data.sales) : utilJs.formatTenThousand(data.visits)) + (localStorage.getItem('isWxAppIos') == 1 ? '次观看' : data.payType == 2 ? '人购买' : '次观看');
            break;
          case this.ckFrom.reservation:
            str = utilJs.formatTenThousand(data.count) + (this.ckFrom.reservation && localStorage.getItem('isWxAppIos') == 1 ? '人预约' : '人购买');
            break;
          case this.ckFrom.social:
            str = utilJs.formatTenThousand(data.number) + '人加入';
            break;
          case this.ckFrom.activity:
            str = data.isShowEnroll != -1 ? utilJs.formatTenThousand(data.enrollCount) + '人已报名' : '';
            break;
          case this.ckFrom.exam:
            str = utilJs.formatTenThousand(data.sales) + (localStorage.getItem('isWxAppIos') == 1 ? '人已测' : data.payType == 2 ? '人已购买' : '人已测');
            break;
          case this.ckFrom.mutuaTest:
            str = (localStorage.getItem('isWxAppIos') == 1 ? '已测' : data.payType == 2 ? '已售' : '已测') + (data.payType == 2 ? utilJs.formatTenThousand(data.sales) : utilJs.formatTenThousand(data.hasTestNum));
            break;
          case this.ckFrom.voiceTest:
            str = (localStorage.getItem('isWxAppIos') == 1 ? '已测' : data.payType == 2 ? '已售' : '已测') + (data.payType == 2 ? utilJs.formatTenThousand(data.sales) : utilJs.formatTenThousand(data.hasTestNum));
            break;
          case this.ckFrom.datum:
            str = utilJs.formatTenThousand(data.downloadTimes) + '人下载';
            break;
          case this.ckFrom.clockIn:
            str = utilJs.formatTenThousand(data.hasMan) + '人参与';
            break;
          case this.ckFrom.testpPaper:
            str = utilJs.formatTenThousand(data.joinNumber) + '人参与';
            break;
          case this.ckFrom.itemBank:
            str = utilJs.formatTenThousand(data.subscribers) + '人参与';
            break;
          case this.ckFrom.shopping:
            str = '已售' + utilJs.formatTenThousand(data.sales);
            break;
          case this.ckFrom.ebooks:
            str = utilJs.formatTenThousand(data.viewNum) + '次阅读';
            break;
          case this.ckFrom.camp:
            str = utilJs.formatTenThousand(data.people) + '人报名';
            break;
          case this.ckFrom.edu:
            str = '剩余名额:' + utilJs.formatTenThousand(data.stock - data.saleNum);
            break;
          case this.ckFrom.privateClass:
            str = `共${utilJs.formatTenThousand(data.detailNum)}节${data.isHideLimit != 1 ? ' | 剩' + utilJs.formatTenThousand(data.limitNum - data.saleNum) + '名额' : ''}`;
            break;
          case this.ckFrom.distributionColumnPay:
            str = `${data.isUpdating == 1 && data.isSync == 1 ? '暂含' : '共含'}${utilJs.formatTenThousand(data.subCount)}节课`;
            break;
          case this.ckFrom.circle:
            str = `${utilJs.formatTenThousand(data.memberCount)}人加入 | ${utilJs.formatTenThousand(data.feedCount)}条动态`;
            break;
          default:
            str = '';
            break;
        }
        return str;
      }
    },
    showCover() {
      return function (data) {
        if (this.modelType == 15) return data.courseAvatar || require('../../assets/defult270.png');
        if (this.modelType == 48) return data.cover || data.avatar || require('../../assets/defult270.png');
        let cover = '';
        switch (parseFloat(data.prodType)) {
            case 110: case 111: case 112: case this.ckFrom.course:
            cover = data.courseAvatar || data.avatar || data.cover
            break;
          case this.ckFrom.column: case this.ckFrom.package: case this.ckFrom.clockIn: case this.ckFrom.camp:
          case this.ckFrom.qa: case this.ckFrom.distributionColumnPay: case this.ckFrom.personalLive: case this.ckFrom.privateClass: case this.ckFrom.ebooks:
          case this.ckFrom.circle:
            cover = data.cover
            break;
          case this.ckFrom.exam: case this.ckFrom.mutuaTest: case this.ckFrom.voiceTest: case this.ckFrom.testpPaper: case this.ckFrom.itemBank:
            cover = this.ckFrom.exam == data.prodType || this.ckFrom.itemBank == data.prodType || this.ckFrom.testpPaper == data.prodType ? (data.avatar || require('@/assets/examination_defult.png')) : data.avatar
            break;
          case this.ckFrom.word: case this.ckFrom.reservation: case this.ckFrom.activity:
            cover = this.ckFrom.activity == parseFloat(data.prodType) ? (data.poster || data.avatar || require('@/assets/activity_defult.png')) : data.poster;
            break;
          case this.ckFrom.datum:
            cover = data.datumCover;
            break;
          case this.ckFrom.shopping:
            cover = data.avatar;
            break;
          case this.ckFrom.live:
            cover = data.liveCover;
            break;
          case this.ckFrom.valuableCoupon:
            cover = JSON.parse(data.productImage) ? JSON.parse(data.productImage)[0] : require('@/assets/defult270.png');
            break;
          case this.ckFrom.edu:
            cover = data.image;
            break;
          default:
            cover = data.avatar || data.cover || require('@/assets/defult270.png');
            break;
        }
        return cover || data.avatar || data.cover || require('@/assets/defult270.png');
      }
    },
  },
  watch: {
  },
  methods: {
    getTimeByDate(time) {
      var myDate = new Date()
      if (utilJs.getTimeByDate(time) == 0) {
        return false
      }
      if (utilJs.getTimeByDate(time) >= myDate.getTime()) {
        return false
      } else {
        return true
      }
    },
    isShowOriginalPrice(item) {
      if (item.prodType == this.ckFrom.distributionColumnPay) {
        return !this.$isWxAppIos() && item.markPrice * 1 > 0 && this.visible.originalPriceVisible;
      } else if (item.prodType == this.ckFrom.shopping) {
        return !this.$isWxAppIos() && item.originalPrice && (item.originalPrice * 1 > 0) && this.visible.originalPriceVisible;
      }
    },
    isShowCrossedPrice(crossedPrice) {
      return !this.$isWxAppIos() && this.visible.crossedPriceVisible && crossedPrice && Number(crossedPrice) > 0;
    },
    clickGoDetail(item) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      // 产品组件
      let id = item.id, prodType = item.prodType, courseType = item.courseType;
      if (this.isProdListCom) {
        // 商品列表数据兼容
        id = item.prodType == this.ckFrom.camp ? item.subId : item.id;
        courseType = [501, 523].includes(item.cProdType) && item.prodType ? item.childType : item.courseType;
      } else if (this.modelType == 48) {
        // 标签导航数据兼容
        id = id || item.id;
      } else {
        if ([110, 111, 112].includes(item.prodType)) {
          prodType = this.ckFrom.course;
          id = item.courseId;
        } else if (this.modelType == 15) {
          let toPath = "/homePage/course/courseForenotice?cId=" + item.courseId;
          this.iosAppRouteChange(toPath);
          return
        } else if (prodType == this.ckFrom.exam) {
          id = item.topicId;
        } else if (prodType == this.ckFrom.mutuaTest || prodType == this.ckFrom.voiceTest || prodType == this.ckFrom.testpPaper) {
          id = item.paperMainId;
        } else if (prodType == this.ckFrom.itemBank) {
          id = item.libraryId;
        } else if (prodType == this.ckFrom.clockIn) {
          if (item.isJoin != 1) {
            let toPath = `/homePage/clockIn/clockInDetail?clockInId=${item.signColId}`;
            this.iosAppRouteChange(toPath);
          } else {
            this.enterClock(item);
          }
          return
        } else if (prodType == this.ckFrom.package) {
          id = item.cId
        } else if (prodType == this.ckFrom.word) {
          id = item.dId
        } else if (prodType == this.ckFrom.reservation) {
          id = item.rtId
        } else if (prodType == this.ckFrom.datum) {
          id = item.datumId
        } else if (prodType == this.ckFrom.column) {
          id = item.columnId
        } else if (prodType == this.ckFrom.activity) {
          id = item.activityId
        } else if (prodType == this.ckFrom.shopping) {
          id = item.mgId
        } else if (prodType == this.ckFrom.privateClass) {
          id = item.classId
        } else if (prodType == this.ckFrom.qa) {
          let toPath = toPath = '/homePage/qa/answerLord';
          this.iosAppRouteChange(toPath);
          return
        } else if (prodType == this.ckFrom.distributionColumnPay) {
          if (item.proType != 1) return
          let disFrom = item.promotionType == 1 ? global.ckFrom.collageColumn : '';
          let toPath = `/homePage/column/columnDetail?courseId=-1&distribution=1&ckFrom=${disFrom}&extId=${item.dcId}`;
          this.iosAppRouteChange(toPath);
          return
        } else if (prodType == this.ckFrom.personalLive) {
          id = item.lpId
        } else if (prodType == this.ckFrom.valuableCoupon) {
          let toPath = `/member/myExchange/valuableCoupon?id=${item.Id}`;
          this.iosAppRouteChange(toPath);
          return
        }
      }
      goDetails(this, prodType, id, '', courseType, 1);
    },
    enterClock(clockInInfo) {
      let title = clockInInfo.name;
      let shareImg = clockInInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInInfo.signColId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = clockInInfo.shareDesc || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      localStorage.setItem("homeWorkShareInfo", JSON.stringify(shareData));
      switch (clockInInfo.type) {
        case 1:
          //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
          let startTimeTamp = new Date(clockInInfo.startTime.replace(/-/g, "/")).getTime();
          let endTimeTamp = new Date(clockInInfo.endTime.replace(/-/g, "/")).getTime();
          let nowTimeTamp = new Date().getTime();
          let curTime = utilJs.dateFormat(nowTimeTamp);
          if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
            curTime = clockInInfo.startTime;
          }
          this.iosAppRouteChange(`/homePage/clockIn/stuHomeWork?workType=1&clockInId=${clockInInfo.signColId}&curDate=${curTime}`);
          break;
        case 2:
          //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
          let nextUrl = `/homePage/clockIn/stuHomeWork?workType=2&clockInId=${clockInInfo.signColId}&curId=${clockInInfo.hwId}`;
          this.iosAppRouteChange(nextUrl);
          break;
        case 3:
          //闯关打卡
          this.iosAppRouteChange(`/homePage/clockIn/stuHomeWork?workType=3&clockInId=${clockInInfo.signColId}&curId=${clockInInfo.hwId}`);
          break;
      }
    },
    getTime(item) {
      let {startAt, enrollStartAt, prodAcStatus, prodType, joinMode} = item;
      if (prodType == this.ckFrom.activity) {
        if (prodAcStatus == 1 || prodAcStatus == 3) {
          return prodAcStatus == 1 ? startAt + "报名开始" : enrollStartAt + "活动开始";
        } else {
          let map = {
            2: '报名进行中',
            4: '活动进行中',
            5: '已结束',
            6: '活动进行中',
          }
          return map[prodAcStatus]
        }
      } else if (prodType == this.ckFrom.camp) {
        // 入营方式 1 固定开课时间 2 随到随学
        if (joinMode == 2) {
          return '随到随学'
        }
        // 营期状态，1.待招生、2.招生中、3.待开课、4.开课中、5.已结束 6.招生中/开课中
        if (prodAcStatus == 1 || prodAcStatus == 3) {
          return prodAcStatus == 1 ? enrollStartAt + "报名开始" : startAt + "营期开始";
        } else {
          let map = {
            2: '报名进行中',
            4: '营期进行中',
            5: '已结束',
            6: '营期进行中'
          }
          return map[prodAcStatus];
        }
      } else if (prodType == this.ckFrom.live) {
        return startAt + '开始';
      } else {
        return startAt
      }
    },
    compTimeFn(index, trainingList) {
      //status 1.待招生、2.招生中、3.待开课、4.开课中、5.已结束、6.招生中/开课中
      let stime = trainingList ? utilJs.getTimeByDate(trainingList[index].enrollStartAt) : 0;
      let time = '';
      if (trainingList[index].status == 1) {
        time = stime;
      }
      return time;
    },
    clickMore() {
      this.$emit('clickMore')
    }
  },
  mounted() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.status-btn{
  height: pxToRem(28);
  line-height:pxToRem(28);
  border-radius: pxToRem(15);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.classify-sign {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  background: #333;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 0.9rem;
  height: 0.9rem;
  overflow: hidden;
}
.classify-sign > i {
  margin-left: -0.03rem;
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.c-ww110 {
  width: 2.75rem;
}
.c-hh44 {
  height: 1.1rem;
}
.c-mtauto {
  margin-top: auto;
}
.c-pv2 {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}
.c-tag-br12 {
  border-radius: 0.3rem 0 0.3rem 0;
}
.readings {
  padding: 0 0.25rem;
  opacity: 0.9;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.greenGradient{
  background-image: linear-gradient(90deg, #38D788 0%, #88E59B 100%);
}
.pinkGradient{
  background-image: linear-gradient(90deg, #FF6757 0%, #F7968C 100%);
}
.w50-8 {
  width: calc(50% - 0.2rem);
}
.w100-12 {
  width: calc(100% - 0.3rem);
}
/* (100% - 24) / 3 */
.w33-24-3 {
  width: calc(33.3% - 0.4rem);
}
/* (100% - 24) / 3 */
.w33-20-3 {
  width: calc(33.3% - 0.33rem);
}
.status-color {
  color: #409eff;
}
.prodType-triangle{
  width:0;
  height:0;
  border-width: 0 0.2rem 0.2rem 0.2rem;
  border-style:solid;
  border-color:transparent #fff transparent transparent;/*透明 白 透明 透明 */
  top: 0;
  right: 0;
}
.ws-nor {
  white-space: normal;
}
</style>